<template>
  <div class="product-intro-container">
    <search-menu @search="handleSearch" @reset="handleReset" class="search">
      <InputItem lable="名称">
        <el-input placeholder="请输入" v-model="searchForm.name"></el-input>
      </InputItem>
    </search-menu>
    <div class="table">
      <el-button @click="handleAdd" type="primary" class="add-button">
        新增
      </el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="产品名称"> </el-table-column>
        <el-table-column label="公开状态">
          <template slot-scope="scope">
            <div class="op-buttons">
              <el-switch
                active-text="公开"
                inactive-text="隐藏"
                v-model="scope.row.state"
                @change="
                  (val) => {
                    handleSwitch(scope.row, val);
                  }
                "
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="op-buttons">
              <TableButton @click="handleEdit(scope.row)">编辑</TableButton>
              <TableButton @click="handleDelete(scope.row)">删除</TableButton>
              <TableButton @click="handleView(scope.row)">预览</TableButton>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <customPagination
        :paginationData="paginationData"
        @getList="handleGetList"
      ></customPagination>
    </div>
    <el-dialog :visible.sync="showAddDialog" title="新增">
      <el-form :model="addDialogData" :rules="dialogFormRules" ref="addForm">
        <div class="dialog-line">
          <el-form-item label="名称:" prop="name" class="dialog-item">
            <el-input
              placeholder="请输入"
              v-model="addDialogData.name"
              class="dialog-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="Banner跳转:"
            prop="BannerLink"
            class="dialog-item"
          >
            <el-input
              placeholder="请输入"
              v-model="addDialogData.bannerLink"
              class="dialog-input"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="banner:" prop="bannerImg">
          <ImgUploader v-model="addDialogData.bannerImg" />
        </el-form-item>
        <el-form-item label="产品优势:" prop="advantageImgs">
          <MultipleImgUploader v-model="addDialogData.advantageImgs" />
        </el-form-item>
        <el-form-item label="产品功能:" prop="functionImgs">
          <MultipleImgUploader v-model="addDialogData.functionImgs" />
        </el-form-item>
        <el-form-item label="应用场景:" prop="applicationImgs">
          <MultipleImgUploader v-model="addDialogData.applicationImgs" />
        </el-form-item>
        <el-form-item label="赋能案例:" prop="cases">
          <el-select
            v-model="addDialogData.cases"
            multiple
            placeholder="请输入内容"
            filterable
          >
            <el-option
              v-for="item in casesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div class="buttons">
          <el-button
            type="plain"
            @click="
              () => {
                this.showAddDialog = false;
              }
            "
            >取消</el-button
          >
          <el-button type="primary" @click="handleView(editDialogData)"
            >预览</el-button
          >
          <el-button type="primary" @click="handleAddSubmit">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="showEditDialog" title="新增">
      <el-form :model="editDialogData" :rules="dialogFormRules" ref="editForm">
        <div class="dialog-line">
          <el-form-item label="名称:" prop="name" class="dialog-item">
            <el-input
              placeholder="请输入"
              v-model="editDialogData.name"
              class="dialog-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="Banner跳转:"
            prop="BannerLink"
            class="dialog-item"
          >
            <el-input
              placeholder="请输入"
              v-model="editDialogData.bannerLink"
              class="dialog-input"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="banner:" prop="bannerImg">
          <ImgUploader v-model="editDialogData.bannerImg" />
        </el-form-item>
        <el-form-item label="产品优势:" prop="advantageImgs">
          <MultipleImgUploader v-model="editDialogData.advantageImgs" />
        </el-form-item>
        <el-form-item label="产品功能:" prop="functionImgs">
          <MultipleImgUploader v-model="editDialogData.functionImgs" />
        </el-form-item>
        <el-form-item label="应用场景:" prop="applicationImgs">
          <MultipleImgUploader v-model="editDialogData.applicationImgs" />
        </el-form-item>
        <el-form-item label="赋能案例:" prop="cases">
          <el-select
            v-model="editDialogData.cases"
            multiple
            placeholder="请输入内容"
            filterable
          >
            <el-option
              v-for="item in casesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div class="buttons">
          <el-button
            type="plain"
            @click="
              () => {
                this.showEditDialog = false;
              }
            "
            >取消</el-button
          >
          <el-button type="primary" @click="handleView(editDialogData)"
            >预览</el-button
          >
          <el-button type="primary" @click="handleEditSubmit">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="showViewDialog" title="预览"></el-dialog>
  </div>
</template>

<script>
import SearchMenu from "@/components/common/SearchMenu.vue";
import reset from "@/utils/reset";
import InputItem from "@/components/common/InputItem.vue";
import customPagination from "@/components/customPagination/index.vue";
import TableButton from "@/components/common/TableButton.vue";
import ImgUploader from "@/components/common/ImgUploader.vue";
import MultipleImgUploader from "@/components/common/MultipleImgUploader.vue";
import cancelWarning from "@/mixins/cancelWarning";
export default {
  mixins: [cancelWarning],
  components: {
    SearchMenu,
    InputItem,
    customPagination,
    TableButton,
    ImgUploader,
    MultipleImgUploader,
  },
  data() {
    return {
      showAddDialog: false,
      showEditDialog: false,
      showViewDialog: false,
      searchForm: {
        name: "",
      },
      defaultVals: {
        name: "",
      },
      paginationData: {
        pageSize: 10,
        pageIndex: 1,
        total: 100,
      },
      tableData: [],
      defaultDialogData: {
        name: "",
        bannerLink: "",
        bannerImg: "",
        advantageImgs: [],
        functionImgs: [],
        applicationImgs: [],
        cases: [],
      },
      addDialogData: {
        name: "",
        bannerLink: "",
        bannerImg: "",
        advantageImgs: [],
        functionImgs: [],
        applicationImgs: [],
        cases: [],
      },
      editDialogData: {
        name: "",
        bannerLink: "",
        bannerImg: "",
        advantageImgs: [],
        functionImgs: [],
        applicationImgs: [],
        cases: [],
      },
      dialogFormRules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 20, message: "长度不能超过20个字符", trigger: "blur" },
        ],
        bannerLink: [
          { max: 30, message: "长度不能超过30个字符", trigger: "blur" },
        ],
        bannerImg: [
          { required: true, message: "请上传图片", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    setPage() {},
    handleSearch() {},
    handleReset() {
      reset(this.searchForm, this.defaultVals);
    },
    handleGetList() {},
    handleSwitch(rowData, val) {
      //发送请求
    },
    handleAdd() {
      this.showAddDialog = true;
      this.addDialogData = {};
    },
    handleEdit(rowData) {
      this.showEditDialog = true;
      this.editDialogData = {
        ...rowData,
      };
    },
    handleView(data) {
      this.showViewDialog = true;
    },
    async handleDelete(rowData) {
      this.cancelWarning(() => {
        //发送请求
        // console.log(rowData);
      });
    },
    handleAddSubmit() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          // 发出请求 ...

          this.$message.success("添加成功");
          this.addDialogData = {
            ...this.defaultDialogData,
          };
          this.showAddDialog = false;
          this.setPage();
        } else {
          this.$message.error("请正确填写信息");
        }
      });
    },
    handleEditSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          // 发出请求 ...

          this.$message.success("编辑成功");
          this.showEditDialog = false;
          this.setPage();
        } else {
          this.$message.error("请正确填写信息");
        }
      });
    },
  },
  async created() {
    this.tableData = [
      {
        name: "PDM产品管理系统",
        state: true,
      },
      {
        name: "PDM产品管理系统",
        state: true,
      },
      {
        name: "PDM产品管理系统",
        state: true,
      },
    ];
    this.casesOptions = [
      {
        label: "选项1",
        value: 1,
      },
      {
        label: "选项2",
        value: 2,
      },
    ];
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/componentCommon.scss";
.product-intro-container {
  @include pageComp;
  .dialog-line {
    display: flex;
    width: 100%;
    .dialog-item {
      // display: inline-block;
      width: 50%;
      .dialog-input {
        width: 70%;
      }
    }
  }
}
</style>
